<template>
  <div>
    第二个子组件
    <button @click="toOne">去到第一</button>
    <!--  transition-group  包裹列表渲染
    列表数据从无到有 数据从有到无 都会产生动画 -->
    <transition-group tag="ul"
    enter-active-class="animate__animated animate__flash"
    leave-active-class="animate__animated animate__bounce">
    <!-- 面试题：vue2的v-if和v-for能一起使用吗
    可以，但是不建议一起使用，因为 v-for的优先级高于vif 先循环所有内容 在去判断显示隐藏 浪费性能
  
    解决： 在数据中控制显示隐藏 过滤数据
          用一个template 包裹加载v-if指令 或v-for 指令-->
                 <li   v-for="item in list" :key="item"> {{item}}</li>
    </transition-group>
    <button @click="change">点击</button>
  </div>
</template>

<script>
export default {
  name: '2209vueTranTwo',

  data() {
    return {
      list:[],
      flag:true
    };
  },

  mounted() {
    
  },

  methods: {
    change(){
        
        if(this.flag){
            this.list=["王者荣耀","金铲铲","cf","pubg"]
        }else{
          this.list=[]
        }
        this.flag=!this.flag;
    },
    toOne(){
      // 用name去跳转二级路由
      this.$router.push({name:"tranone"})
    }
  },
};
</script>